<template>
  <p-modal
    v-model="visible"
    :title="title"
    :width="1000"
    :dialog-style="{ top: '40px' }"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div>
      <p-form-model :model="form" :rules="rulesComputed" layout="inline">
        <p-form-model-item label="线索编号" style="width: 26%">
          <p-input v-model="form.leadsNo" placeholder="请输入" />
        </p-form-model-item>
        <p-form-model-item label="线索名称" style="width: 26%">
          <p-input v-model="form.leadsName" placeholder="请输入" />
        </p-form-model-item>
        <p-form-model-item label="销售" style="width: 26%">
          <p-input v-model="form.salesName" placeholder="请输入" />
        </p-form-model-item>
        <p-button type="primary" class="btn-search" @click="getList">
          搜索
        </p-button>
        <p-button @click="reset">重置</p-button>
      </p-form-model>
      <p-table
        class="table-list-container"
        row-key="id"
        :columns="columns"
        bordered
        :scroll="{ y: 350 }"
        :data-source="datasourceCur"
        :pagination="paginationMixin"
        :row-selection="rowSelectionMixin"
        :loading="load"
        @change="handleTableChange"
      >
        <a
          slot="modelNumber"
          slot-scope="text, record"
          @click="$emit('number-click', record)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </p-modal>
</template>

<script>
import mixinTable from '@/mixins/mixin-table.js';
import { postClueTableList } from '@/api/visit.js';

const defaultForm = {
  leadsNo: '',
  leadsName: '',
  salesName: '',
};
export default {
  mixins: [mixinTable],
  props: {
    title: {
      type: String,
      default: '选择线索',
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => ({}),
    },
    selectCur: {
      type: Array,
      default: () => [],
    },
    curKeys: {
      type: Array,
      default: () => [],
    },
    visitId: {
      type: String,
      default: '',
    },
    customerCode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dataSource: [],
      form: {
        ...defaultForm,
      },
      columnKey: undefined,
      asc: undefined,
      datasourceCur: [],
      load: false,
    };
  },

  computed: {
    stateOptions() {
      return this.$store.state.dictionary.dict['leads_status'] || {};
    },
    applicationOptions() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
    orgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
      });
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '线索编号',
          dataIndex: 'leadsNo',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '线索名称',
          width: 150,
          dataIndex: 'leadsName',
          ellipsis: true,
        },

        {
          align: 'center',
          title: '线索状态',
          dataIndex: 'leadsStatus',
          customRender: (text) => this.stateOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '客户名称',
          dataIndex: 'customerName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrgCode',
          customRender: (text) => this.orgOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '应用别',
          dataIndex: 'appCategory',
          customRender: (text) => this.applicationOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '销售',
          dataIndex: 'salesName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: 'PM',
          dataIndex: 'pmName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {
    visible: {
      handler(val) {
        val && this.getClueList();
      },
    },
  },
  created() {
    this.getSelect();
  },

  methods: {
    async getClueList() {
      const data = {
        pageSize: this.paginationMixin.pageSize,
        current: this.paginationMixin.current,
        customerCode: this.customerCode,
        ...this.form,
      };
      this.visibleClue = true;
      this.load = true;
      const result = await postClueTableList(data).finally(
        () => (this.load = false)
      );
      this.datasourceCur = result?.data?.data?.records || [];
      this.paginationMixin.total = result?.data?.data?.total;
    },
    getList() {
      this.getClueList();
    },
    getSelect() {
      this.rowSelectionMixin.getCheckboxProps = (record) => {
        return {
          props: {
            disabled: this.curKeys.indexOf(record.id) !== -1,
          },
        };
      };
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.paginationMixin = page;
      this.getClueList();
    },

    reset() {
      this.form = { ...defaultForm };
      this.paginationMixin.current = 1;
      this.paginationMixin.pageSize = 10;
      this.rowSelectionMixin.selectedRowKeys = [];
      this.getClueList();
    },
    handleSearch() {
      this.visible = true;
    },
    handleCancel() {
      this.rowSelectionMixin.selectedRowKeys = [];
      this.$emit('update:visible', false);
      this.$emit('cancel', false);
    },
    async handleOk() {
      const keys = this.rowSelectionMixin.selectedRowKeys;
      if (!keys.length) {
        this.$message.error('请选择线索！');
        return;
      }
      const current = this.rowSelectionMixin.selectedRows;
      this.$emit('update:selectCur', [...this.selectCur, ...current]);
      this.$emit('update:curKeys', keys);
      this.handleCancel();
      // const curId = current.reduce((pre, cur) => {
      //   pre.push(cur.leadsNo);
      //   return pre;
      // }, []);
      // const data = {
      //   leadsList: curId,
      //   visitNo: this.visitId,
      // };
      // const result = await postAddInfo(data, 'L');
      // if (result.data.code === 0) {
      //   this.$message.success('关联成功');
      //   this.$emit('visit-cur-info');
      //   this.handleCancel();
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    display: flex;
    justify-content: center;
    flex: 1;
  }
}
.table-list-container {
  margin-top: 20px;
  height: 440px !important;
}

.poros-form {
  box-sizing: border-box;
  background-color: #f7f7f8;
  padding: 10px;
  padding-bottom: 0px;
  width: 100%;
}
.poros-form-item {
  width: 25%;
  margin-bottom: 10px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 16px;
}
.messageMaskContent-connect {
  width: 100%;
  height: 540px !important;
  overflow: auto;
}
.foot-connect {
  display: flex;
  justify-content: center;
  height: 35px;
  width: 100%;
}
</style>
